<template>
  <div class="p-20">
    <el-alert type="success" effect="dark" :closable="false" title="拖拽修改浏览器宽度以查看动态布局效果" />
    <ul class="cards mt-20">
      <li class="tile-card add-card">
        <Plus :size="50" />
      </li>
      <li class="tile-card flex align-center justify-center" v-if="loading" v-loading="true"></li>
      <li class="tile-card p-20" v-for="item in list">
        <div class="header">
          <div class="left">
            <el-avatar src="http://comicui.cn/image/avatar.png" />
            <div class="names">
              <span>{{ item.name }}</span>
              <span>{{ item.time }}</span>
            </div>
          </div>
          <div class="progress">
            <el-progress :width="60" :colors="colors" type="dashboard" :percentage="item.progress" />
          </div>
        </div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga nulla reiciendis quaerat odio illum aperiam
          sapiente earum aliquid sequi atque iste iusto magni, corporis ea mollitia exercitationem error doloremque
          possimus?
        </div>
        <div class="buttons">
          <el-button type="success" text size="small" :icon="ViewGridDetail">详情</el-button>
          <el-button type="primary" text size="small" :icon="Edit">编辑</el-button>
          <el-button type="warning" text size="small" :icon="More">查看更多</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { getDatas } from '@/mocks/data';
import { Plus, Edit, More, Tips, ViewGridDetail } from '@icon-park/vue-next';
import { ref } from 'vue';

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
];

const list = ref([]);
const loading = ref(false);

function _getDatas() {
  loading.value = true;
  getDatas().then((res) => {
    list.value = res.data;
    loading.value = false;
  });
}
_getDatas();
</script>

<style scoped lang="scss">
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  justify-content: center;

  li {
    height: 260px;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;

      .left {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 13px;
        .names {
          padding: 0 10px;
          display: flex;
          flex-direction: column;

          > span:last-child {
            margin-top: 4px;
            color: #999;
            font-size: 12px;
          }
        }
      }
    }
    .content {
      margin-top: 20px;
      font-size: 14px;
      color: #999;
      flex: 1;
    }
    .buttons {
      text-align: center;
    }
  }

  .add-card {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    &:hover {
      border-color: var(--el-color-primary);
      color: var(--el-color-primary);
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
    }
  }
}
</style>
